import React, { memo, useEffect, useState } from "react";
import { getTimedTask } from "@common/envOverviewApi/doc";
import { TimedTaskInitialState } from "@model";
import Highlight from "react-highlight";
import "highlight.js/styles/vs2015.css";
import "./style.less";
import { Divider, Empty } from "antd";

type Props = {
  nodeName: string;
};

interface TimedTaskInfoProps {
  itemData?: {
    user?: string;
    info?: string;
  };
}

/**
 * @func 定时任务页面组件
 * @param props
 * @returns React.FC
 */
const TimedTask: React.FC<Props> = (props) => {
  const [data, setData] = useState(TimedTaskInitialState);

  const { nodeName } = props;

  useEffect(() => {
    getTimedTaskData();
  }, []);

  const getTimedTaskData = async () => {
    try {
      const json = await getTimedTask(nodeName);
      setData(json);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className="timed-task">
      {data.found && data._source ? (
        <>
          <div className="timed-task-header">
            <p>定时任务数量:</p>
            {data._source?.cronnum ? (
              <span>{data._source.cronnum}</span>
            ) : (
              <span>该机器无定时任务！</span>
            )}
          </div>
          <div className="timed-task-content">
            {data._source?.cron ? (
              data._source.cron.map((item) => (
                <div key={item.user}>
                  <div className="timed-task-user">
                    <p>校验人:</p>
                    {item?.user ? item.user : "校验人为空！"}
                  </div>
                  <p>校验详情:</p>
                  <Highlight>{item?.info}</Highlight>
                  <Divider />
                </div>
              ))
            ) : (
              <span>该机器无校验详情！</span>
            )}
          </div>
        </>
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      )}
    </div>
  );
};

export default memo(TimedTask);
